<template>
  <div class="boder">
    <k-tabs class="k-tabs">
      <k-tab name="大厅" :selected="true">
        <list :list="onLineList"></list>
      </k-tab>
      <k-tab name="群聊">
        <list
          :list="groupList"
          :group="true"
          :empty="'正在开发中...'"
        ></list>
      </k-tab>
      <k-tab name="好友">
        <list :list="[]" :empty="'正在开发中...'"></list>
      </k-tab>
    </k-tabs>
  </div>
</template>

<script>
import List from './List'
import { mapState } from 'vuex'

export default {
  name: 'Body',
  computed: {
    ...mapState([
      'onLineList',
      'groupList'
    ])
  },
  components: {
    List
  }
}
</script>

<style lang="stylus">
  .boder
    color red
</style>
<style lang="stylus">
  .boder
    ul.tabs
      width 100%
      box-sizing box-border
      display flex
      padding 0
      border-bottom 1px solid #24272c !important
      margin 0 !important
      padding 5px 0
      li
        width 33% !important
        color #fff !important
        a
          text-align center
          span
            color #fff
            font-size 18px
            font-weight 100
            line-height 24px
      li.is-active
        span
          color #3caf36
      li.is-active:after
        color #3caf36 !important
        display none !important
</style>
